<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const routes = ref([]);

// 获取所有路由
onMounted(() => {
  // 只显示views目录下的路由，过滤掉首页路由
  routes.value = router
    .getRoutes()
    .filter(
      (route) => route.path !== "/" && !route.path.includes(":") && route.name
    )
    .map((route) => ({
      path: route.path,
      name: route.name,
    }));
});
</script>

<template>
  <div class="app-container">
    <header>
      <div class="logo-container">
        <a href="https://vite.dev" target="_blank">
          <img src="/vite.svg" class="logo" alt="Vite logo" />
        </a>
        <a href="https://vuejs.org/" target="_blank">
          <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
        </a>
        <h1 class="app-title">Vue 3 + Vite 自动路由系统</h1>
      </div>

      <nav class="nav-menu">
        <router-link to="/" class="nav-link home-link">
          <span class="nav-icon">🏠</span>
          <span>首页</span>
        </router-link>

        <!-- responsive grid that flows left-to-right then wraps top-to-bottom -->
        <div class="route-links">
          <router-link
            v-for="route in routes"
            :key="route.path"
            :to="route.path"
            class="nav-link route-link"
            title="{{ route.name }}"
          >
            <span class="nav-icon">📄</span>
            <span class="route-name">{{ route.name }}</span>
          </router-link>
        </div>
      </nav>
    </header>

    <main>
      <div class="content-container">
        <!-- 路由视图 -->
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>
    </main>
  </div>
</template>

<style scoped>
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Inter", "Avenir", Helvetica, Arial, sans-serif;
  color: #2c3e50;
  background-color: #f8f9fa;
  min-height: 100vh;
}

header {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  padding: 20px;
  border-radius: 12px;
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.logo-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.app-title {
  margin-left: 15px;
  font-size: 1.5rem;
  font-weight: 600;
  color: #42b883;
}

.logo {
  height: 2.5em;
  padding: 0.3em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.nav-menu {
  display: flex;
  width: 100%;
  gap: 10px;
}

.route-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nav-link {
  display: flex;
  align-items: center;
  color: #333;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.home-link {
  background-color: #42b883;
  color: white;
}

.route-link {
  width: 120px;
  background-color: #f0f0f0;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nav-icon {
  margin-right: 8px;
  font-size: 0.95rem;
}

.route-name {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 26px); /* leave room for icon and padding */
}

.nav-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.router-link-active.route-link {
  background-color: #e6f7f0;
  color: #42b883;
  font-weight: 500;
}

.content-container {
  background-color: white;
  border-radius: 12px;
  padding: 30px;
  min-height: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
</style>
